import React, { useEffect, useRef, useState } from 'react'
import { Header, Loading } from 'src/components'
import { useSelector } from 'react-redux'
import { getExpired } from 'src/api/getData'
import BScroll from 'better-scroll'
import './index.scss'

const HbHistory = () => {

    const { userInfo } = useSelector(state => state);
    const [showLoading, setShowLoading] = useState(true)
    const [expiredList, setExpiredList] = useState([])
    const scrollRef = useRef()

    useEffect(() => {
        const initData = async () => {
            //获取历史红包
            if (userInfo) {
                let res = await getExpired(userInfo.user_id);
                setExpiredList(res)
                setShowLoading(false)
                new BScroll(scrollRef.current, {
                    deceleration: 0.001,
                    bounce: true,
                    swipeTime: 1800,
                    onclick: true,
                });
            }
        }
        initData()
    }, [userInfo])

    return <div className="page_benefit_hbdistory">
        <Header title="历史红包" goBack></Header>
        {
            !showLoading && <section ref={scrollRef} className="scroll_container">
                <ul className="hongbao_list_ul">
                    {
                        expiredList.map(item => {
                            return <li className="hongbao_list_li" key={item.id}>
                                <section className="list_item">
                                    <div className="list_item_left">
                                        <span>¥</span>
                                        <span>{String(item.amount).split('.')[0]}</span>
                                        <span>.</span>
                                        <span>{String(item.amount).split('.')[1] || 0}</span>
                                        <p>{item.description_map.sum_condition}</p>
                                    </div>
                                    <div className="list_item_right">
                                        <h4>{item.name}</h4>
                                        <p>{item.description_map.validity_periods}</p>
                                        <p>{item.description_map.phone}</p>
                                    </div>
                                </section>
                                {
                                    item.limit_map && <footer className="list_item_footer">
                                        <p>{item.limit_map.restaurant_flavor_ids}</p>
                                    </footer>
                                }
                                <svg className="expired">
                                    <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#expired"></use>
                                </svg>
                            </li>
                        })
                    }

                </ul>
            </section>
        }
        {
            showLoading && <Loading />
        }
    </div>
}

export default HbHistory